<template>
	<el-form :rules="rules" 
			 ref="LoginForm" 
			 :model="LoginForm" 
			 class="LoginContainer">
		<h3 class="LoginTitle">用户登录</h3>
		<el-form-item prop="username">
			<el-input type="text" auto-complete="false" v-model="LoginForm.username" placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" auto-complete="false" v-model="LoginForm.password" placeholder="请输入密码"></el-input>
		</el-form-item>
		<el-form-item prop="code" class="LoginCode">
			<el-input type="text" auto-complete="false" v-model="LoginForm.code" placeholder="点击图片更换验证码"></el-input>
			<img :src="captchaurl" @click="updateCaptcha()"/>
		</el-form-item>
		<el-checkbox v-model="checked" class="LoginRemeber"> 记住我</el-checkbox>
		<el-button type="primary" style="width: 100%" @click='LoginFormSubmit()'>登陆</el-button>
	</el-form>
	
</template>


<script>
	export default{
		name:"Login",
		data(){
			return{
				captchaurl:'/captcha?time='+new Date(),
				LoginForm:{
					username:"",
					password:"",
					code:""
				},
				checked:true,
				rules:{
					username:[{required:true,message:'用户名不能为空',trigger:'blur'}],
					password:[{required:true,message:'密码不能为空',trigger:'blur'}],
					code:[{required:true,message:'验证码不能为空',trigger:'blur'}]
				}
			}
		},
		methods:{
			updateCaptcha(){
				this.captchaurl='/captcha?time='+new Date();
			},
			LoginFormSubmit(){
				this.$refs.LoginForm.validate((valid)=>{
					if(valid){
						this.postRequest('/login',this.LoginForm).then(resp=>{
							if(resp){
								//存储用户token
								console.log(resp)
								const tokenStr = resp.obj.tokenHead+resp.obj.token;
								window.sessionStorage.setItem('tokenStr',tokenStr);
								const staffName=resp.obj.name;
								window.sessionStorage.setItem('name',staffName);
								//存储用户信息
								
								//登陆跳转
								this.$router.replace('/home');
							}
						})
					}else{
						this.$message.error('请输入所有字段');
						return false;
					}
				})
			}
		}
	}
</script>

<style>
	.LoginContainer{
		border: 1px solid #e6e6e6;
		border-radius: 15px;
		background-clip: padding-box;
		background: #fff;
		margin: 160px auto;
		padding: 15px 35px 15px 35px;
		width: 350px;
		box-shadow: 0 0 25px #cac6c6;
	}
	.LoginTitle{
		text-align: center;
	}
	.LoginRemeber{
		padding-bottom:15px;
	}
	.LoginCode{
		width: 350px;
	}
	.el-form-item__content{
		display: flex;
		align-items: center;
	}
</style>
